<template>
  <div class="module-card">
    <div>{{ message }}</div>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      message: '',
    };
  },
  created() {
    this.initDataFun(); // 初始化数据
  },
  mounted() {
    console.log('mounted1');
    this.updateMessage();
    console.log('mounted2');
  },
  beforeDestroy() {},
  watch: {},
  computed: {},
  methods: {
    // 初始化数据
    initDataFun() {},
    // 异步更新队列
    updateMessage: async function () {
      this.message = '已更新';
      console.log(this.$el.textContent); // => '未更新'
      // 方法内，后续所有内容会等到nextTick结束才执行
      await this.$nextTick(async () => {
        console.log('2222');
      });
      console.log(this.$el.textContent); // => '已更新'
    },
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped></style>
